 /*
 * @description: 删除通用弹窗
 * @Author: along
 * @Date: 2020-10-16
 * @Last Modified by: along
 * @Last Modified time: 2020-10-16
 */
<template>
    <div
        class="zdDialog"
        v-if="show && title"
    >
        <div class="wrap">
            <img
                v-if="url"
                :src="url"
                class="wrap-logo"
            >
            <p class="wrap-title">{{ title }}</p>
            <p
                v-if="content"
                class="wrap-content"
            >
                {{ content }}
            </p>
            <div class="wrap-foot">
                <el-button
                    size="medium"
                    type="default"
                    @click="show = false"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    @click="confrim()"
                    :style="{width: '120px'}"
                >
                    确定
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZdDialog',
    props: {
        url: {
            type: String,
            default: () => {}
        },
        title: {
            type: String,
            default: () => {}
        },
        content: {
            type: String,
            default: () => {}
        }
    },
    data () {
        return {
            show: false,
            row: {}
        };
    },
    mounted () {

    },
    methods: {
        confrim () {
            this.$emit('confrim', this.row);
            this.show = !this.show;
        },
        showDialog (row = {}) {
            this.row = row;
            this.show = true;
        }
    }
};
</script>

<style lang="less" scoped>
.zdDialog {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000001;
    background: rgba(0,0,0,.7);
    display: flex;
    justify-content: center;
    align-items: center;
    .wrap {
        width: 360px;
        background: #ffffff;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 0;
        position: relative;
        top: -100px;
        &-logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        &-title {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            margin: 16px 0;
            white-space: nowrap;
        }
        &-content {
            font-size: 14px;
            color: #999;
            text-align: center;
            margin-bottom: 28px;
            width: 300px;
            text-align: center;
            line-height: 20px;
        }
        &-foot {
            display: flex;
            justify-content: center;
        }
    }
}
</style>